<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../css/mui.min.css">
    <link rel="stylesheet" href="../../css/hui.css">
    <link rel="stylesheet" href="../../css/swiper.min.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1190625_m3wxzcfcc89.css">
    <link rel="stylesheet" href="../../css/common.css">
    <title>首页</title>
    <style>
        html,body{
            background-color: #FAFAFE;
        }
        
       .mui-title{
          width: 3.47rem!important;
          height: .3rem;
          margin: 0 auto;
          line-height: .3rem;
          background-color: #f5f5fd;
          border-radius: .15rem;
          text-align: left;
       }
       .mui-title i{
           font-size: .16rem;
           color: #A5A5C1;
           font-weight: 100!important;
           margin-left: .15rem;
           margin-right: .05rem;
       }
       .mui-title input{
           font-size: .14rem;
           background-color: #f5f5fd;
           font-weight: 100!important;
           color: #A5A5C1;
       }
       .mui-title input ::-moz-placeholder{color:#A5A5C1;}              
       .mui-title input ::-webkit-input-placeholder{color:#A5A5C1;}     
       .mui-title input :-ms-input-placeholder{color:#A5A5C1;} 
       .top{
           width: 100%;
           overflow: hidden;
           background-color: #fff;
       }
       .swiper-container .swiper-wrapper{
           overflow: visible;
       }
       .banner{
           width: 3.47rem;
           height: 1.58rem;
           margin: 0 auto .15rem;
       }
        .banner img{
            width: 3.47rem;
            height: 1.58rem;
            margin: 0 auto;
            border-radius: .04rem;
        }
        .menu{
            width: 3.47rem;
            height: .73rem;
            margin: 0 auto;
            padding: 0 .04rem;
            overflow: hidden;
        }
        .menu .item{
            width: .5rem;
        }
        .menu .item img{
            width: .39rem;
            height: .39rem;
            margin: 0 auto;
        }
        .menu .item .text{
            width: 100%;
            text-align: center;
            font-size: .12rem;
            color: #333;
        }
        .hotGoods{
            width: 3.47rem;
            height: 2.12rem;
            border-radius: .05rem;
            margin: .1rem auto 0;
            overflow: hidden;
            background-color: #fff;
        }
        .hotGoods .title{
          width: 100%;
          height: .5rem;
          padding: 0 .14rem;
          line-height: .57rem;
        }
        .hotGoods .title .left{
            font-size: .16rem;
            color: #333;
            font-weight: bold;
        }
        .hotGoods .title .right{
            font-size: .12rem;
            color: #999;
        }
        .hotGoods .title .right i{
            font-size: .12rem;
            margin-left: .03rem;
        }
        .hotGoods .list-out{
            display:-webkit-box;
            width: 100%;
            padding-left: .14rem;
            overflow-x: scroll;
            -webkit-overflow-scrolling:touch;
        }
        .list-out::-webkit-scrollbar {
            background-color: transparent;
        }
        .hotGoods  .item{
            width: 1.1rem;
            height: auto;
            margin-right: .1rem;
            overflow: hidden;
        }
        .hotGoods  .item img{
            width: 1.08rem;
            height: 1.08rem;
            margin: 0 auto;
        }
        .hotGoods  .item .text{
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: .13rem;
            color: #333;
            margin: .05rem 0 .02rem;
        }
        .hotGoods  .item .price{
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            margin-bottom: .05rem;
        }
        .hotGoods  .item .price .shop_price{
            font-size: .12rem;
            color: #F5B443;
            margin-right: .1rem;
        }
        .hotGoods  .item .price .market_price{
            font-size: .1rem;
            color: #ccc;
            text-decoration: line-through;
        }
        .jingpin{
            width: 100%;
            padding: 0 .14rem;
        }
        .jingpin .title{
            width: 100%;
            height: .53rem;
        }
        .jingpin .title img{
            width: .73rem;
            height: .23rem;

        }
        .jingpin  .item{
            width: 1.69rem;
            height: auto;
            margin-bottom: .1rem;
            float: left;
            overflow: hidden;
            border-radius: .03rem;
            background-color: #fff;
        }
        .jingpin  .item:first-child{
            float: left;
        }
        .jingpin  .item:nth-child(2n+2){
            float: right;
        }
        .jingpin .item img{
            width: 1.66rem;
            height: 1.66rem;
            margin: 0 auto;
        }
        .jingpin .item .text{
            width: 100%;
            padding: 0 .06rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: .13rem;
            color: #333;
            margin: .05rem 0 .02rem;
        }
        .jingpin .item .price{
            width: 100%;
            padding: 0 .06rem;
            overflow: hidden;
            white-space: nowrap;
            margin-bottom: .05rem;
        }
        .jingpin .item .price .shop_price{
            font-size: .12rem;
            color: #F5B443;
            margin-right: .1rem;
        }
        .jingpin .item .price .market_price{
            font-size: .1rem;
            color: #ccc;
            text-decoration: line-through;
        }
        #hui-load-more{
            margin-bottom: .64rem;
        }
    </style>
</head>
<body  >
    <header class='header  flex  align-items space-around'>
        <div class="mui-title flex align-items">
            <i class='iconfont icon-sousuo'></i>
            <input type="text" placeholder='请输入商品名称' readonly/>
        </div>
    </header>
    <div class="main" id="refreshContainer">
        <div class="hui-refresh-icon"></div>
        <div class="top">
            <div class="banner">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <!-- <div class="swiper-slide"><img src="" alt=""></div> -->
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
                </div>
            </div>
            <div class="menu flex  space-between">
                <div class="item">
                    <img src="../../image/page_menu_01.png" alt="">
                    <div class="text">热卖商品</div>
                </div>
                <div class="item">
                    <img src="../../image/page_menu_02.png" alt="">
                    <div class="text">新品上市</div>
                </div>
                <div class="item">
                    <img src="../../image/page_menu_03.png" alt="">
                    <div class="text">今日促销</div>
                </div>
                <div class="item">
                    <img src="../../image/page_menu_04.png" alt="">
                    <div class="text">特卖商品</div>
                </div>
            </div>
        </div>
        <div class="hotGoods hot-goods">
            <div class="title">
                <div class="left fl">热卖商品</div>
                <div class="right fr">更多<i class="iconfont icon-gengduo"></i></div>
            </div>
            <div class="list-out">
                <!-- <div class="item">
                    <img src="../../image/goods_02.png">
                    <div class="text">纯白毛巾大小尺纯白毛巾大小尺</div>
                    <div class="price"><span class="shop_price">¥15.41</span><span class="market_price">¥20.00</span></div>
                </div> -->
            </div>
        </div>
        <div class="hotGoods cuxiao-goods">
            <div class="title">
                <div class="left fl">促销商品</div>
                <div class="right fr">更多<i class="iconfont icon-gengduo"></i></div>
            </div>
            <div class="list-out">
                <!-- <div class="item">
                    <img src="../../image/goods_02.png">
                    <div class="text">纯白毛巾大小尺纯白毛巾大小尺</div>
                    <div class="price"><span class="shop_price">¥15.41</span><span class="market_price">¥20.00</span></div>
                </div> -->
            </div>
        </div>
        <div class="hotGoods xinpin-goods">
            <div class="title">
                <div class="left fl">新品上市</div>
                <div class="right fr">更多<i class="iconfont icon-gengduo"></i></div>
            </div>
            <div class="list-out">
                <!-- <div class="item">
                    <img src="../../image/goods_02.png">
                    <div class="text">纯白毛巾大小尺纯白毛巾大小尺</div>
                    <div class="price"><span class="shop_price">¥15.41</span><span class="market_price">¥20.00</span></div>
                </div> -->
            </div>
        </div>
        <div class="jingpin">
            <div class="title flex align-items flex_center">
                <img src="../../image/page_title.png">
            </div>
            <div class="tuijian-list">
                <!-- <div class="item">
                    <img src="../../image/goods_01.png">
                    <div class="text">五星级酒店专用床上用五星级酒店专用床上用五星级酒店专用床上用</div>
                    <div class="price"><span class="shop_price">¥15.41</span><span class="market_price">¥20.00</span></div>
                </div> -->
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="item active">
            <img class="f-img" src="../../image/page_index_01.png">
            <img class="s-img" src="../../image/page_index_01_active.png" alt="">
            <div class="text">首页</div>
        </div>
        <div class="item">
            <img class="f-img" src="../../image/page_index_02.png">
            <img class="s-img" src="../../image/page_index_02_active.png">
            <div class="text">分类</div>
        </div>
        <div class="item">
            <img class="f-img" src="../../image/page_index_03.png">
            <img class="s-img" src="../../image/page_index_03_active.png">
            <div class="text">购物车</div>
        </div>
        <div class="item">
            <img class="f-img" src="../../image/page_index_04.png">
            <img class="s-img" src="../../image/page_index_04_active.png">
            <div class="text">我的</div>
        </div>
    </div>
</body>
<script src="../../js/jquery-3.3.1.min.js"></script>
<script src="../../js/hui.js"></script>
<script src="../../js/hui-refresh-load-more.js"></script>
<script src="../../js/swiper.min.js"></script>
<script src="../../js/common.js"></script>
<script>
   $(document).ready(function(){
       var start = 0; //推荐商品起始数
       var count = 0;  //推荐商品总数
       //下拉刷新
       hui.refresh('#refreshContainer', throttle(init));
       //上拉加载
       hui.loadMore(throttle(function(){
          if ($('.jingpin .item').length < count) {
            start = $('.jingpin .item').length
            getTuijianGds()
          }else{
            hui.endLoadMore(true)
          }
          
       }));
       function init(){
        if(hui.refreshNumber < 1){hui.loading('加载中...');}
           hui.loading('正在加载')
           setTimeout(function(){
              getBanner()
              getReMaiGds()
              getCuxiaoGds()
              getXinPinGds()
              getTuijianGds()
              hui.lazyLoad(); // 调用懒加载
           },1500)
       }
       //获取banner
       function getBanner(){
            ajax('/api/app/get_banner',{},function(res){
                hui.endRefresh();
                if (res.code == 1){
                    var html = "";
                    var {data = []} = res;
                    data.map(v=>{
                        html+= `<div class="swiper-slide"><img src="${v.banner}" alt=""></div>`
                    })
                    $('.swiper-wrapper').html(html)
                    startSwiper()
                }
            })
       }
       //获取热卖商品
       function getReMaiGds(){
            ajax('/api/goods/search_hot',{price_order:1,start:0},function(ret){
                hui.endRefresh();
                if (ret) {
                    if (ret.code == 1) {
                        var dt = ret.data;
                        var str = "";
                        dt.map(function(v,i){
                            if (i<5) {
                                str+='<div class="item link-to" data-id="'+v.id+'" data-href="../goods/goods_detail.html"><img src="'+v.pic+'"  >'
                                +'<div class="text">'+v.goods_name+'</div>'
                                +'<div class="price"><span class="shop_price">¥'+v.shop_price+'</span><span class="market_price">¥'+v.market_price+'</span></div></div>' 
                            }
                        })
                        $('.hot-goods .list-out').html(str)
                    }
                }
            })
        }
        //获取促销商品
        function getCuxiaoGds(){
            ajax('/api/goods/get_low_goods',{price_order:1,start:0},function(ret){
                hui.endRefresh();
                if (ret) {
                    if (ret.code == 1) {
                        var dt = ret.data;
                        var str = "";
                        dt.map(function(v,i){
                            if (i<5) {
                                str+='<div class="item link" data-id="'+v.id+'" data-href="../goods/goods_detail.html"><img src="'+v.pic+'" >'
                                +'<div class="text">'+v.goods_name+'</div>'
                                +'<div class="price"><span class="shop_price">¥'+v.shop_price+'</span><span class="market_price">¥'+v.market_price+'</span></div></div>' 
                            }
                        })
                        $('.cuxiao-goods .list-out').html(str)
                    }
                }
            })
        }
        //获取新品上市
        function getXinPinGds(){
            ajax('/api/goods/search_new',{price_order:1,start:0},function(ret){
                hui.endRefresh();
                if (ret) {
                    if (ret.code == 1) {
                        var dt = ret.data;
                        var str = "";
                        dt.map(function(v,i){
                            if (i<5) {
                                str+='<div class="item link" data-id="'+v.id+'" data-href="../goods/goods_detail.html"><img src="'+v.pic+'" >'
                                +'<div class="text">'+v.goods_name+'</div>'
                                +'<div class="price"><span class="shop_price">¥'+v.shop_price+'</span><span class="market_price">¥'+v.market_price+'</span></div></div>' 
                            }
                        })
                        $('.xinpin-goods .list-out').html(str)
                    }
                }
            })
        }
        //获取推荐商品
        function getTuijianGds(){
            ajax('/api/goods/get_top_goods',{price_order:1,start:start},function(ret){
                hui.endRefresh();
                hui.endLoadMore()
                if (ret) {
                    if (ret.code == 1) {
                        var dt = ret.data;
                        var str = "";
                        dt.map(function(v,i){
                                str+='<div class="item link" data-id="'+v.id+'" data-href="../goods/goods_detail.html"><img lazySrc="'+v.img+'" src="../../image/zhanwei.png" class="hui-lazy">'
                                +'<div class="text">'+v.goods_name+'</div>'
                                +'<div class="price"><span class="shop_price">¥'+v.shop_price+'</span><span class="market_price">¥'+v.market_price+'</span></div></div>' 
                        })
                        $('.tuijian-list').append(str)
                        count = ret.count;
                    }
                }
            })
        }
        
   })

</script>
</html>